<template>
    <div class="modal fade" id="addUploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content" style="width: 700px;">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel"> {{title}}</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
	                <div class="form-group">
	                  	<label class="column-title control-label"><span class="required">*</span>户型：</label>
						<div class="col-md-8 col-sm-10">
							<select class="form-control" id="bedroom" style="width:21%;padding:6px 4px;display:inline;margin-left: 5px;" v-model="editHouseType.room">
								<option value="0">无卧室</option>
								<option value="1">1室</option>
								<option value="2">2室</option>
								<option value="3">3室</option>
								<option value="4">4室</option>
								<option value="5">5室</option>
							</select>
							<select class="form-control" id="parlor" style="width:21%;padding:6px 12px;display:inline;margin-left: 5px;" v-model="editHouseType.hall">
								<option value="0">无厅</option>
								<option value="1">1厅</option>
								<option value="2">2厅</option>
								<option value="3">3厅</option>
								<option value="4">4厅</option>
								<option value="5">5厅</option>
								<option value="6">6厅</option>
								<option value="7">7厅</option>
								<option value="8">8厅</option>
							</select>
							<select class="form-control" id="bathroom" style="width:22%;padding:6px 1px;display:inline;margin-left: 5px;" v-model="editHouseType.bathroom">
								<option value="0">无卫生间</option>
								<option value="1">1卫</option>
								<option value="2">2卫</option>
								<option value="3">3卫</option>
								<option value="4">4卫</option>
								<option value="5">5卫</option>
								<option value="6">6卫</option>
								<option value="7">7卫</option>
								<option value="8">8卫</option>
							</select>
							<select class="form-control"  id="balcony" style="width:21%;padding:6px 4px;display:inline;margin-left: 5px;" v-model="editHouseType.balcony">
								<option value="0">无阳台</option>
								<option value="1">1阳台</option>
								<option value="2">2阳台</option>
								<option value="3">3阳台</option>
								<option value="4">4阳台</option>
								<option value="5">5阳台</option>
								<option value="6">6阳台</option>
							</select>
						</div>
	                </div>
					<div class="form-group">
						<div class="col-md-6">
							<label class="column-title  control-label">户型名称：</label>
							<div class="col-md-8 col-sm-10">
								<input type="text" class="form-control"  style="padding:6px 6px;display:inline" placeholder="例如:C1户型" v-model="editHouseType.huxingName">
							</div>
						</div>
						<div class="col-md-6">
							<label class="column-title control-label"><span class="required">*</span>建筑面积：</label>
							<div class="col-md-8 input-group">
								<div class="col-md-3 input-group" style="float:left">
									<InputNumber  :min="0"    v-model="beginArea" ></InputNumber>
								</div>
								<div style="float:left;height: 34px;line-height: 36px;margin: 0 2px;">
									<span>至</span>
								</div>
								<div class="col-md-3 input-group" style="float:left">
									<InputNumber  :min="0"    v-model="endArea" ></InputNumber>
								</div>
								<div class="col-md-2 input-group" style="float:left;line-height: 36px">
									平米
								</div>
							</div>
						</div>

					</div>

					<div class="form-group">
						<div class="col-md-6">
							<label class="column-title  control-label"><span class="required">*</span>朝向：</label>
							<div class="col-md-8 col-sm-10">
								<select class="form-control col-md-8"  id="orientations" style="display:inline;" v-model="editHouseType.orientations">
									<option v-for="(key,value) in orientationsList" :value="key">{{key}}</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<label class="column-title control-label"><span class="required">*</span>均价：</label>
							<div class="col-md-3 input-group" style="float:left">
								<InputNumber  :min="0"    v-model="beginPrice" ></InputNumber>
							</div>
							<div style="float:left;line-height: 36px">
								<span style="padding:0 2px">至</span>
							</div>
							<div class="col-md-3 input-group" style="float:left">
								<InputNumber :min="0"  v-model="endPrice" ></InputNumber>
							</div>
							<div class="col-md-2 input-group" style="float:left;line-height: 36px">
								元/平米
							</div>
						</div>

					</div>

					<div class="form-group">
						<div class="col-md-6">
							<label class="column-title  control-label">结构：</label>
							<div class="col-md-8 col-sm-10">
								<select class="form-control col-md-8"  id="houseStruct" style="display:inline;" v-model="editHouseType.houseStruct">
									<option v-for="(key,value) in houseStructList" :value="key">{{key}}</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<label class="column-title control-label">装修情况：</label>
							<div class="col-md-8 input-group">
								<select class="form-control col-md-8"  id="decoration" style="display:inline;" v-model="editHouseType.decoration">
									<option v-for="(key,value) in decoration" :value="key">{{key}}</option>
								</select>
							</div>
						</div>

					</div>

	                <div class="form-group">
						<div class="col-md-6">
							<label class="column-title control-label"><span class="required">*</span>上传：</label>
							<div class="col-sm-10" style="width:60%">
								<input type="file" class="form-control" style="width:100%;" @change="onFileChange" name="files" id="files">
							</div>
						</div>
	                  	<div class="cold-md-6">
							<img v-bind:src="imgUrl" v-if="imgUrl" width="200px" height="150px">
						</div>
	                </div>
	            </div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveHouseType">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["uploadModal","houseType","decoration"],
		data() {
			return {
				imgUrl:'',
				imgName:'',
				btnShow: true,
				title:'上传户型图片',
				editHouseType:{},
                orientationsList:[],
                houseStructList:[],
				beginPrice:'',
				endPrice:'',
                beginArea:'',
				endArea:''
			}
		},
		watch: {
            houseType:{
                handler: function(val, oldVal){
                    if(val){
						this.init();
                    }
                },
			}
		},
		mounted:function(){
            this.getDecoration();
            this.getHouseStruct();
		},
		methods: {
			//创建文件对象
			onFileChange(e) {
				layer.load(0, {shade: false}); //弹出加载层
		        var files = e.target.files || e.dataTransfer.files;
		        if (!files.length)
		           return;
                var size = files[0].size;
                if(size > 3145728){
                    layer.msg("图片大小不能超过3M");
                    layer.closeAll('loading'); //关闭加载层
                    return;
                }
		        this.createImage(files[0]);
		    },
		    createImage(file) {
		        var _self = this;
				var reader = new FileReader();
		        reader.readAsDataURL(file);
		        reader.onload = function(e){  
		            _self.ajaxfile(e.target.result);
		        };  
		    },
		    //将base64转换blob
		    dataURLtoBlob(dataUrl) {
			    var arr = dataUrl.split(','), 
			        mime = arr[0].match(/:(.*?);/)[1],
			        bstr = atob(arr[1]), 
			        n = bstr.length, 
			        u8arr = new Uint8Array(n);
			    while (n--) {
			        u8arr[n] = bstr.charCodeAt(n);
			    }
			    return new Blob([u8arr], { type: mime });
		    },
		    //上传图片
		    ajaxfile(file){
		    	var _self = this;
		    	var myForm = new FormData();   //创建formdata
				var blobBin = _self.dataURLtoBlob(file);  //base64转换blob
				myForm.append("blobObject", blobBin);  //想formData添加blob数据
		    	var url = _self.utilHelper.apiUrl+'/api/uploadBase64';
                _self.$http.post(url, myForm).then((response)=>{
                	layer.closeAll('loading'); //关闭加载层
                	var data = response.body;
                	if(data.result == "1"){
                		_self.imgUrl = file;
                		_self.imgName = data.resData.imgName;
                	}else{
                		layer.msg("图片上传失败，请重试");
                	}
                },(response)=>{
					layer.msg(response);
				});
		    },
		    //保存户型信息
		    saveHouseType(id){
                //卧室
                var bedroom=$("#bedroom").find("option:selected").text();
                //客厅
                var parlor=$("#parlor").find("option:selected").text();
                //卫生间
                var bathroom=$("#bathroom").find("option:selected").text();
                //阳台
                var balcony=$("#balcony").find("option:selected").text();
				//面积
                this.editHouseType.area = this.beginArea+','+this.endArea;


                if(!(this.beginArea && this.endArea)){
		 			layer.msg("请填写面积");
		 			return;
		 		}
		 		//均价区间判断
                if(this.beginArea && this.endArea){
                    if(parseFloat(this.beginArea) > parseFloat(this.endArea)){
                        layer.msg("面积区间填写错误");
                        return false;
                    }
                }

		 		if(this.imgName == "" && !this.imgUrl){
		 			layer.msg("请上传户型图");
		 			return;
		 		}
		 		if(!this.editHouseType.orientations){
                    layer.msg("请选择朝向");
                    return;
				}
				if(!(this.beginPrice && this.endPrice)){
                    layer.msg("请填写均价");
                    return;
				}


                //均价区间判断
                if(this.beginPrice && this.endPrice){
                    if(parseFloat(this.beginPrice) > parseFloat(this.endPrice)){
                        layer.msg("均价区间填写错误");
                        return false;
                    }
                }
		 		//保存到后台的户型信息
		 		var houseTypeList = {
		 		    id:this.editHouseType.id,
		 			area: this.beginArea+','+this.endArea,
		 			apartmentLayout: bedroom + parlor + bathroom + balcony,
		 			url: this.imgName == ''?this.imgUrl:this.imgName,
					orientations:this.editHouseType.orientations,
					averagePrice:this.beginPrice+','+this.endPrice,
					huxingName:this.editHouseType.huxingName,
					houseStruct:this.editHouseType.houseStruct,
					decoration:this.editHouseType.decoration,
                    aprtmentInfo:this.editHouseType.aprtmentInfo,
					toDelete:0
		 		}
		 		console.log(houseTypeList);
		 		$('#addUploadModal').modal('hide');
				//子组件向父组件传递信号: 调用父组件中对子组件的监听
				this.$emit('saveUploadListener', houseTypeList);
		    },
			init(){
			    console.log("--------->" + this.houseType);
			    console.log( this.houseType);
                if( !(!this.houseType || !this.houseType.id)){
                    this.editHouseType.id = this.houseType.id;
                    this.title = this.houseType.apartmentLayout;
                    this.editHouseType.premiseId = this.houseType.premiseId;
                    this.editHouseType.room = this.houseType.aprtmentInfo[0];
                    this.editHouseType.hall = this.houseType.aprtmentInfo[1];
                    this.editHouseType.bathroom = this.houseType.aprtmentInfo[2];
                    this.editHouseType.balcony = this.houseType.aprtmentInfo[3];
                    this.editHouseType.huxingName = this.houseType.huxingName;
                    this.editHouseType.area =  this.houseType.area;
                    this.editHouseType.orientations = this.houseType.orientations;
                    //均价区间
                    if(this.houseType.averagePrice){
                        let price = this.houseType.averagePrice.split(',');
                        if(price.length > 1){
                            this.beginPrice = price[0];
                            this.endPrice = price[1];
						} else{
                            this.beginPrice = price[0]
						}
					}else{
                        this.beginPrice = '';
                        this.endPrice = '';
                    }
                    //建筑面积
                    if(this.houseType.area){
                        let price = this.houseType.area.split(',');
                        if(price.length > 1){
                            this.beginArea = price[0];
                            this.endArea = price[1];
                        } else{
                            this.beginArea = price[0]
                        }
                    }else{
                        this.beginArea = '';
                        this.endArea = '';
                    }

                    this.editHouseType.houseStruct = this.houseType.houseStruct;
                    this.editHouseType.decoration = this.houseType.decoration;

                    this.imgUrl = this.houseType.url;
                }else{
                    this.title = '上传户型图';
                    this.editHouseType.id = null;
                    this.editHouseType.room = '';
                    this.editHouseType.hall = '';
                    this.editHouseType.bathroom = '';
                    this.editHouseType.balcony = '';
                    this.editHouseType.huxingName = '';
                    this.editHouseType.area =  '';
                    this.editHouseType.orientations = '';
                    this.editHouseType.averagePrice = '';
                    this.editHouseType.houseStruct = '';
                    this.editHouseType.decoration = '';
                    this.imgUrl = '';
                    this.imgName = '';
					this.beginArea =''
					this.endArea='';
					this.beginPrice='';
					this.endPrice='';
				}
			},
			getDecoration(){
			    var _self = this;
			    var body = {}
                var url = _self.utilHelper.apiUrl+'/common/getEnum/OrientationsEnum';
                _self.$http.get(url, body).then((response)=>{
                    var body = response.body.data;
                    _self.orientationsList = body;
                });
			},
			getHouseStruct(){
                var _self = this;
                var body = {}
                var url = _self.utilHelper.apiUrl+'/common/getEnum/HouseStructEnum';
                _self.$http.get(url, body).then((response)=>{
                    var body = response.body.data;
                    _self.houseStructList = body;
                });
			}
		}
	}
	
</script>
<style scoped>
	.column-title{float:left;width:80px;}
</style>